<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prometheus 监控系统演示</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.7/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="bg-base-100">
    <div id="app">
        <!-- 导航栏 -->
        <div class="navbar bg-primary text-primary-content shadow-lg">
            <div class="navbar-start">
                <div class="dropdown">
                    <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
                        <i class="fas fa-bars text-xl"></i>
                    </div>
                    <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
                        <li><a @click="activeTab = 'overview'" class="text-base-content">概览</a></li>
                        <li><a @click="activeTab = 'config'" class="text-base-content">配置</a></li>
                        <li><a @click="activeTab = 'metrics'" class="text-base-content">指标</a></li>
                        <li><a @click="activeTab = 'alerts'" class="text-base-content">告警</a></li>
                        <li><a @click="activeTab = 'query'" class="text-base-content">查询</a></li>
                    </ul>
                </div>
                <a class="btn btn-ghost text-xl">
                    <i class="fas fa-chart-line mr-2"></i>
                    Prometheus 监控系统
                </a>
            </div>
            <div class="navbar-center hidden lg:flex">
                <ul class="menu menu-horizontal px-1">
                    <li><a @click="activeTab = 'overview'" :class="{'active': activeTab === 'overview'}">概览</a></li>
                    <li><a @click="activeTab = 'config'" :class="{'active': activeTab === 'config'}">配置</a></li>
                    <li><a @click="activeTab = 'metrics'" :class="{'active': activeTab === 'metrics'}">指标</a></li>
                    <li><a @click="activeTab = 'alerts'" :class="{'active': activeTab === 'alerts'}">告警</a></li>
                    <li><a @click="activeTab = 'query'" :class="{'active': activeTab === 'query'}">查询</a></li>
                </ul>
            </div>
            <div class="navbar-end">
                <div class="badge badge-success gap-2">
                    <i class="fas fa-circle text-xs"></i>
                    在线
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="container mx-auto p-6">
            <!-- 概览页面 -->
            <div v-if="activeTab === 'overview'" class="space-y-6">
                <!-- 系统状态卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="card bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-xl">
                        <div class="card-body">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h2 class="card-title text-2xl">{{ systemStats.targets }}</h2>
                                    <p class="opacity-80">监控目标</p>
                                </div>
                                <i class="fas fa-bullseye text-3xl opacity-80"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card bg-gradient-to-r from-green-500 to-green-600 text-white shadow-xl">
                        <div class="card-body">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h2 class="card-title text-2xl">{{ systemStats.metrics }}</h2>
                                    <p class="opacity-80">活跃指标</p>
                                </div>
                                <i class="fas fa-chart-bar text-3xl opacity-80"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card bg-gradient-to-r from-yellow-500 to-yellow-600 text-white shadow-xl">
                        <div class="card-body">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h2 class="card-title text-2xl">{{ systemStats.alerts }}</h2>
                                    <p class="opacity-80">活跃告警</p>
                                </div>
                                <i class="fas fa-exclamation-triangle text-3xl opacity-80"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card bg-gradient-to-r from-purple-500 to-purple-600 text-white shadow-xl">
                        <div class="card-body">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h2 class="card-title text-2xl">{{ systemStats.uptime }}</h2>
                                    <p class="opacity-80">运行时间</p>
                                </div>
                                <i class="fas fa-clock text-3xl opacity-80"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 系统架构图 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-2xl mb-4">
                            <i class="fas fa-sitemap text-primary"></i>
                            Prometheus 系统架构
                        </h2>
                        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                            <div class="card bg-blue-50 border border-blue-200">
                                <div class="card-body text-center">
                                    <i class="fas fa-server text-4xl text-blue-600 mb-3"></i>
                                    <h3 class="font-bold text-lg">Prometheus Server</h3>
                                    <p class="text-sm text-gray-600">核心服务器，负责数据收集、存储和查询</p>
                                    <div class="badge badge-primary mt-2">端口: 9090</div>
                                </div>
                            </div>
                            
                            <div class="card bg-green-50 border border-green-200">
                                <div class="card-body text-center">
                                    <i class="fas fa-download text-4xl text-green-600 mb-3"></i>
                                    <h3 class="font-bold text-lg">Exporters</h3>
                                    <p class="text-sm text-gray-600">数据导出器，收集系统和应用指标</p>
                                    <div class="flex gap-1 justify-center mt-2">
                                        <div class="badge badge-success">Node: 9100</div>
                                        <div class="badge badge-success">App: 8080</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card bg-orange-50 border border-orange-200">
                                <div class="card-body text-center">
                                    <i class="fas fa-bell text-4xl text-orange-600 mb-3"></i>
                                    <h3 class="font-bold text-lg">Alertmanager</h3>
                                    <p class="text-sm text-gray-600">告警管理器，处理和分发告警信息</p>
                                    <div class="badge badge-warning mt-2">端口: 9093</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 实时指标图表 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h3 class="card-title">
                                <i class="fas fa-microchip text-primary"></i>
                                CPU 使用率
                            </h3>
                            <canvas id="cpuChart" width="400" height="200"></canvas>
                        </div>
                    </div>
                    
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h3 class="card-title">
                                <i class="fas fa-memory text-primary"></i>
                                内存使用率
                            </h3>
                            <canvas id="memoryChart" width="400" height="200"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 配置页面 -->
            <div v-if="activeTab === 'config'" class="space-y-6">
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-2xl mb-4">
                            <i class="fas fa-cog text-primary"></i>
                            Prometheus 配置文件
                        </h2>
                        <div class="tabs tabs-boxed mb-4">
                            <a class="tab" :class="{'tab-active': configTab === 'prometheus'}" @click="configTab = 'prometheus'">prometheus.yml</a>
                            <a class="tab" :class="{'tab-active': configTab === 'alerts'}" @click="configTab = 'alerts'">alert_rules.yml</a>
                            <a class="tab" :class="{'tab-active': configTab === 'alertmanager'}" @click="configTab = 'alertmanager'">alertmanager.yml</a>
                        </div>
                        
                        <div v-if="configTab === 'prometheus'" class="mockup-code">
                            <pre><code># Prometheus 主配置文件
global:
  scrape_interval: 15s
  scrape_timeout: 10s
  evaluation_interval: 15s

# 告警规则文件
rule_files:
  - "alert_rules.yml"

# 告警管理器配置
alerting:
  alertmanagers:
    - static_configs:
        - targets:
          - localhost:9093

# 抓取配置
scrape_configs:
  # Prometheus 自身监控
  - job_name: 'prometheus'
    scrape_interval: 5s
    static_configs:
      - targets: ['localhost:9090']
        labels:
          service: 'prometheus'
          environment: 'demo'

  # Node Exporter 监控
  - job_name: 'node_exporter'
    scrape_interval: 5s
    static_configs:
      - targets: ['localhost:9100']
        labels:
          service: 'node_exporter'
          environment: 'demo'

  # 应用程序监控
  - job_name: 'demo_app'
    scrape_interval: 10s
    static_configs:
      - targets: ['localhost:8080']
        labels:
          service: 'demo_app'
          environment: 'demo'</code></pre>
                        </div>
                        
                        <div v-if="configTab === 'alerts'" class="mockup-code">
                            <pre><code>groups:
  - name: system_alerts
    rules:
      # CPU 使用率过高告警
      - alert: HighCPUUsage
        expr: 100 - (avg by(instance) (irate(node_cpu_seconds_total{mode="idle"}[5m])) * 100) > 80
        for: 2m
        labels:
          severity: warning
          service: system
        annotations:
          summary: "CPU 使用率过高"
          description: "实例 {{ $labels.instance }} CPU 使用率超过80%，当前值: {{ $value }}%"

      # 内存使用率过高告警
      - alert: HighMemoryUsage
        expr: (node_memory_used_bytes / node_memory_total_bytes) * 100 > 85
        for: 2m
        labels:
          severity: warning
          service: system
        annotations:
          summary: "内存使用率过高"
          description: "实例 {{ $labels.instance }} 内存使用率超过85%，当前值: {{ $value }}%"

      # 磁盘空间不足告警
      - alert: DiskSpaceLow
        expr: (node_disk_free_bytes / node_disk_total_bytes) * 100 < 20
        for: 5m
        labels:
          severity: critical
          service: system
        annotations:
          summary: "磁盘空间不足"
          description: "实例 {{ $labels.instance }} 磁盘剩余空间少于20%，当前值: {{ $value }}%"</code></pre>
                        </div>
                        
                        <div v-if="configTab === 'alertmanager'" class="mockup-code">
                            <pre><code># Alertmanager 配置文件
global:
  resolve_timeout: 5m

# 路由配置
route:
  group_by: ['alertname', 'cluster', 'service']
  group_wait: 10s
  group_interval: 10s
  repeat_interval: 1h
  receiver: 'default'
  routes:
    - match:
        severity: critical
      receiver: 'critical-alerts'
    - match:
        severity: warning
      receiver: 'warning-alerts'

# 接收器配置
receivers:
  - name: 'default'
    webhook_configs:
      - url: 'http://localhost:8080/webhook'
        send_resolved: true

  - name: 'critical-alerts'
    email_configs:
      - to: 'admin@example.com'
        subject: '🚨 严重告警: {{ .GroupLabels.alertname }}'
        body: |
          告警详情:
          {{ range .Alerts }}
          - 告警: {{ .Annotations.summary }}
          - 描述: {{ .Annotations.description }}
          - 时间: {{ .StartsAt }}
          {{ end }}

  - name: 'warning-alerts'
    slack_configs:
      - channel: '#alerts'
        title: '⚠️ 警告告警'
        text: '{{ range .Alerts }}{{ .Annotations.summary }}{{ end }}'</code></pre>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 指标页面 -->
            <div v-if="activeTab === 'metrics'" class="space-y-6">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 系统指标 -->
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h3 class="card-title">
                                <i class="fas fa-server text-primary"></i>
                                系统指标
                            </h3>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center">
                                    <span>CPU 使用率</span>
                                    <div class="flex items-center gap-2">
                                        <progress class="progress progress-primary w-20" :value="metrics.cpu" max="100"></progress>
                                        <span class="text-sm font-mono">{{ metrics.cpu }}%</span>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span>内存使用率</span>
                                    <div class="flex items-center gap-2">
                                        <progress class="progress progress-secondary w-20" :value="metrics.memory" max="100"></progress>
                                        <span class="text-sm font-mono">{{ metrics.memory }}%</span>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span>磁盘使用率</span>
                                    <div class="flex items-center gap-2">
                                        <progress class="progress progress-accent w-20" :value="metrics.disk" max="100"></progress>
                                        <span class="text-sm font-mono">{{ metrics.disk }}%</span>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span>网络流量</span>
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-mono">{{ metrics.network }} MB/s</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 应用指标 -->
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h3 class="card-title">
                                <i class="fas fa-globe text-primary"></i>
                                应用指标
                            </h3>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center">
                                    <span>HTTP 请求总数</span>
                                    <span class="font-mono text-lg">{{ metrics.httpRequests }}</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span>平均响应时间</span>
                                    <span class="font-mono text-lg">{{ metrics.responseTime }}ms</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span>错误率</span>
                                    <div class="flex items-center gap-2">
                                        <progress class="progress progress-error w-20" :value="metrics.errorRate" max="100"></progress>
                                        <span class="text-sm font-mono">{{ metrics.errorRate }}%</span>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span>活跃连接数</span>
                                    <span class="font-mono text-lg">{{ metrics.activeConnections }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 指标类型说明 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h3 class="card-title mb-4">
                            <i class="fas fa-info-circle text-primary"></i>
                            Prometheus 指标类型
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            <div class="card bg-blue-50 border border-blue-200">
                                <div class="card-body text-center p-4">
                                    <i class="fas fa-plus-circle text-2xl text-blue-600 mb-2"></i>
                                    <h4 class="font-bold">Counter</h4>
                                    <p class="text-xs text-gray-600">只能增加的计数器，如请求总数</p>
                                </div>
                            </div>
                            <div class="card bg-green-50 border border-green-200">
                                <div class="card-body text-center p-4">
                                    <i class="fas fa-tachometer-alt text-2xl text-green-600 mb-2"></i>
                                    <h4 class="font-bold">Gauge</h4>
                                    <p class="text-xs text-gray-600">可增可减的仪表，如CPU使用率</p>
                                </div>
                            </div>
                            <div class="card bg-yellow-50 border border-yellow-200">
                                <div class="card-body text-center p-4">
                                    <i class="fas fa-chart-bar text-2xl text-yellow-600 mb-2"></i>
                                    <h4 class="font-bold">Histogram</h4>
                                    <p class="text-xs text-gray-600">直方图，记录数值分布</p>
                                </div>
                            </div>
                            <div class="card bg-purple-50 border border-purple-200">
                                <div class="card-body text-center p-4">
                                    <i class="fas fa-chart-pie text-2xl text-purple-600 mb-2"></i>
                                    <h4 class="font-bold">Summary</h4>
                                    <p class="text-xs text-gray-600">摘要，记录分位数统计</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 告警页面 -->
            <div v-if="activeTab === 'alerts'" class="space-y-6">
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-2xl mb-4">
                            <i class="fas fa-exclamation-triangle text-primary"></i>
                            活跃告警
                        </h2>
                        <div class="overflow-x-auto">
                            <table class="table table-zebra">
                                <thead>
                                    <tr>
                                        <th>告警名称</th>
                                        <th>严重程度</th>
                                        <th>状态</th>
                                        <th>触发时间</th>
                                        <th>描述</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="alert in alerts" :key="alert.id">
                                        <td class="font-mono">{{ alert.name }}</td>
                                        <td>
                                            <div class="badge" :class="{
                                                'badge-error': alert.severity === 'critical',
                                                'badge-warning': alert.severity === 'warning',
                                                'badge-info': alert.severity === 'info'
                                            }">
                                                {{ alert.severity }}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="badge" :class="{
                                                'badge-success': alert.status === 'resolved',
                                                'badge-error': alert.status === 'firing'
                                            }">
                                                {{ alert.status }}
                                            </div>
                                        </td>
                                        <td class="font-mono text-sm">{{ alert.time }}</td>
                                        <td class="text-sm">{{ alert.description }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 告警规则示例 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h3 class="card-title mb-4">
                            <i class="fas fa-code text-primary"></i>
                            告警规则示例
                        </h3>
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                            <div class="card bg-red-50 border border-red-200">
                                <div class="card-body">
                                    <h4 class="font-bold text-red-700 mb-2">CPU 使用率过高</h4>
                                    <div class="mockup-code text-xs">
                                        <pre><code>- alert: HighCPUUsage
  expr: cpu_usage > 80
  for: 2m
  labels:
    severity: warning
  annotations:
    summary: "CPU使用率过高"</code></pre>
                                    </div>
                                </div>
                            </div>
                            <div class="card bg-yellow-50 border border-yellow-200">
                                <div class="card-body">
                                    <h4 class="font-bold text-yellow-700 mb-2">内存使用率过高</h4>
                                    <div class="mockup-code text-xs">
                                        <pre><code>- alert: HighMemoryUsage
  expr: memory_usage > 85
  for: 2m
  labels:
    severity: warning
  annotations:
    summary: "内存使用率过高"</code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 查询页面 -->
            <div v-if="activeTab === 'query'" class="space-y-6">
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-2xl mb-4">
                            <i class="fas fa-search text-primary"></i>
                            PromQL 查询语言
                        </h2>
                        
                        <!-- 查询输入 -->
                        <div class="form-control mb-4">
                            <label class="label">
                                <span class="label-text">输入 PromQL 查询表达式</span>
                            </label>
                            <div class="input-group">
                                <input type="text" v-model="queryExpression" placeholder="例如: up" class="input input-bordered flex-1">
                                <button class="btn btn-primary" @click="executeQuery">
                                    <i class="fas fa-play mr-2"></i>
                                    执行查询
                                </button>
                            </div>
                        </div>

                        <!-- 查询结果 -->
                        <div v-if="queryResult" class="mockup-code">
                            <pre><code>{{ queryResult }}</code></pre>
                        </div>
                    </div>
                </div>

                <!-- PromQL 示例 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h3 class="card-title mb-4">
                            <i class="fas fa-lightbulb text-primary"></i>
                            PromQL 查询示例
                        </h3>
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                            <div class="space-y-3">
                                <h4 class="font-bold">基础查询</h4>
                                <div class="card bg-gray-50 border">
                                    <div class="card-body p-3">
                                        <code class="text-sm">up</code>
                                        <p class="text-xs text-gray-600 mt-1">查询所有目标的状态</p>
                                    </div>
                                </div>
                                <div class="card bg-gray-50 border">
                                    <div class="card-body p-3">
                                        <code class="text-sm">node_cpu_seconds_total</code>
                                        <p class="text-xs text-gray-600 mt-1">查询CPU时间统计</p>
                                    </div>
                                </div>
                                <div class="card bg-gray-50 border">
                                    <div class="card-body p-3">
                                        <code class="text-sm">http_requests_total{status="200"}</code>
                                        <p class="text-xs text-gray-600 mt-1">查询状态码为200的HTTP请求</p>
                                    </div>
                                </div>
                            </div>
                            <div class="space-y-3">
                                <h4 class="font-bold">聚合查询</h4>
                                <div class="card bg-gray-50 border">
                                    <div class="card-body p-3">
                                        <code class="text-sm">sum(rate(http_requests_total[5m]))</code>
                                        <p class="text-xs text-gray-600 mt-1">计算5分钟内HTTP请求速率总和</p>
                                    </div>
                                </div>
                                <div class="card bg-gray-50 border">
                                    <div class="card-body p-3">
                                        <code class="text-sm">avg(node_memory_usage_percent)</code>
                                        <p class="text-xs text-gray-600 mt-1">计算平均内存使用率</p>
                                    </div>
                                </div>
                                <div class="card bg-gray-50 border">
                                    <div class="card-body p-3">
                                        <code class="text-sm">max(node_cpu_usage_percent) by (instance)</code>
                                        <p class="text-xs text-gray-600 mt-1">按实例分组查询最大CPU使用率</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <footer class="footer footer-center p-10 bg-base-200 text-base-content rounded mt-10">
            <div class="grid grid-flow-col gap-4">
                <a href="https://prometheus.io/" target="_blank" class="link link-hover">Prometheus 官网</a>
                <a href="https://prometheus.io/docs/" target="_blank" class="link link-hover">官方文档</a>
                <a href="https://github.com/prometheus/prometheus" target="_blank" class="link link-hover">GitHub</a>
            </div>
            <div>
                <p>基于 <a href="https://blog.csdn.net/2401_86478612/article/details/148147473" target="_blank" class="link link-primary">CSDN博客文章</a> 创建的 Prometheus 监控系统演示</p>
            </div>
        </footer>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    activeTab: 'overview',
                    configTab: 'prometheus',
                    systemStats: {
                        targets: 3,
                        metrics: 1247,
                        alerts: 2,
                        uptime: '2h 15m'
                    },
                    metrics: {
                        cpu: 45,
                        memory: 67,
                        disk: 23,
                        network: 12.5,
                        httpRequests: 15847,
                        responseTime: 125,
                        errorRate: 2.3,
                        activeConnections: 42
                    },
                    alerts: [
                        {
                            id: 1,
                            name: 'HighCPUUsage',
                            severity: 'warning',
                            status: 'firing',
                            time: '2024-01-15 14:30:25',
                            description: 'CPU使用率超过80%，当前值: 85%'
                        },
                        {
                            id: 2,
                            name: 'HighMemoryUsage',
                            severity: 'warning',
                            status: 'firing',
                            time: '2024-01-15 14:25:10',
                            description: '内存使用率超过85%，当前值: 87%'
                        },
                        {
                            id: 3,
                            name: 'DiskSpaceLow',
                            severity: 'critical',
                            status: 'resolved',
                            time: '2024-01-15 13:45:30',
                            description: '磁盘剩余空间少于20%，已解决'
                        }
                    ],
                    queryExpression: 'up',
                    queryResult: null,
                    cpuChart: null,
                    memoryChart: null
                }
            },
            mounted() {
                this.initCharts();
                this.startDataUpdate();
            },
            methods: {
                executeQuery() {
                    // 模拟查询结果
                    const mockResults = {
                        'up': `up{instance="localhost:9090",job="prometheus"} 1
up{instance="localhost:9100",job="node_exporter"} 1
up{instance="localhost:8080",job="demo_app"} 1`,
                        'node_cpu_seconds_total': `node_cpu_seconds_total{cpu="0",mode="idle"} 12345.67
node_cpu_seconds_total{cpu="0",mode="user"} 2345.89
node_cpu_seconds_total{cpu="0",mode="system"} 1234.56`,
                        'http_requests_total': `http_requests_total{method="GET",status="200"} 15847
http_requests_total{method="POST",status="200"} 3421
http_requests_total{method="GET",status="404"} 234`
                    };
                    
                    this.queryResult = mockResults[this.queryExpression] || `# 查询: ${this.queryExpression}
# 结果: 未找到匹配的指标数据
# 提示: 请尝试使用示例中的查询表达式`;
                },
                initCharts() {
                    // CPU 使用率图表
                    const cpuCtx = document.getElementById('cpuChart').getContext('2d');
                    this.cpuChart = new Chart(cpuCtx, {
                        type: 'line',
                        data: {
                            labels: [],
                            datasets: [{
                                label: 'CPU 使用率 (%)',
                                data: [],
                                borderColor: 'rgb(59, 130, 246)',
                                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                                tension: 0.4
                            }]
                        },
                        options: {
                            responsive: true,
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 100
                                }
                            },
                            plugins: {
                                legend: {
                                    display: false
                                }
                            }
                        }
                    });

                    // 内存使用率图表
                    const memoryCtx = document.getElementById('memoryChart').getContext('2d');
                    this.memoryChart = new Chart(memoryCtx, {
                        type: 'line',
                        data: {
                            labels: [],
                            datasets: [{
                                label: '内存使用率 (%)',
                                data: [],
                                borderColor: 'rgb(16, 185, 129)',
                                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                                tension: 0.4
                            }]
                        },
                        options: {
                            responsive: true,
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 100
                                }
                            },
                            plugins: {
                                legend: {
                                    display: false
                                }
                            }
                        }
                    });
                },
                startDataUpdate() {
                    setInterval(() => {
                        this.updateMetrics();
                        this.updateCharts();
                    }, 2000);
                },
                updateMetrics() {
                    // 模拟实时数据更新
                    this.metrics.cpu = Math.max(20, Math.min(90, this.metrics.cpu + (Math.random() - 0.5) * 10));
                    this.metrics.memory = Math.max(30, Math.min(95, this.metrics.memory + (Math.random() - 0.5) * 8));
                    this.metrics.disk = Math.max(10, Math.min(80, this.metrics.disk + (Math.random() - 0.5) * 5));
                    this.metrics.network = Math.max(1, Math.min(50, this.metrics.network + (Math.random() - 0.5) * 5));
                    this.metrics.httpRequests += Math.floor(Math.random() * 10);
                    this.metrics.responseTime = Math.max(50, Math.min(500, this.metrics.responseTime + (Math.random() - 0.5) * 50));
                    this.metrics.errorRate = Math.max(0, Math.min(10, this.metrics.errorRate + (Math.random() - 0.5) * 1));
                    this.metrics.activeConnections = Math.max(10, Math.min(100, this.metrics.activeConnections + (Math.random() - 0.5) * 10));
                },
                updateCharts() {
                    const now = new Date().toLocaleTimeString();
                    
                    // 更新CPU图表
                    if (this.cpuChart.data.labels.length > 10) {
                        this.cpuChart.data.labels.shift();
                        this.cpuChart.data.datasets[0].data.shift();
                    }
                    this.cpuChart.data.labels.push(now);
                    this.cpuChart.data.datasets[0].data.push(this.metrics.cpu);
                    this.cpuChart.update('none');
                    
                    // 更新内存图表
                    if (this.memoryChart.data.labels.length > 10) {
                        this.memoryChart.data.labels.shift();
                        this.memoryChart.data.datasets[0].data.shift();
                    }
                    this.memoryChart.data.labels.push(now);
                    this.memoryChart.data.datasets[0].data.push(this.metrics.memory);
                    this.memoryChart.update('none');
                }
            }
        }).mount('#app');
    </script>
</body>
</html>